<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>节点信息大屏展示</title>
    <!--设置是否为缩放模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <!--日期样式-->
    <link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!--echarts JS-->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <!-- 轮播swiper文件 -->
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <script src="js/swiper.min.js"></script>
    <!--界面样式-->
    <script src="js/visual.js"></script>
    <script src="js/china.js"></script>
    <script src="js/chartMap.js"></script>
    <!--日期选择-->
    <script type="text/javascript" src="js/moment.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="css/visual.css">

</head>
<body class="ksh">
<!-- 加载动画 js部分使用的是同步处理 与页面渲染进程冲突 无法同时加载 -->
<%--<div id="load">
    <div class="load_img">
        <img class="jzxz1" src="images/jzxz1.png">
        <img class="jzxz2" src="images/jzxz2.png">

    </div>
</div>--%>

<%--顶端标题图片--%>
<div class="head_top">
    <img class="img-responsive" src="images/jcdsj_logo.gif">

</div>
<div class="visual">
    <div class="visual_left">
        <div class="visual_box">
            <div class="visual_title">
                <span>平均运行时间</span>
                <img src="images/ksh33.png">
            </div>
            <div class="visual_chart" id="main1">

            </div>
        </div>
        <div class="visual_box">
            <div class="visual_title">
                <span>交通工具流量</span>
                <img src="images/ksh33.png">
            </div>
            <div class="visual_chart" id="main2">

            </div>
        </div>
        <div class="visual_box">
            <div class="visual_title">
                <span>处理时间极值</span>
                <img src="images/ksh33.png">
            </div>
            <div class="visual_chart sfzcll">
                <a>节点名称</a>
                <a>最低</a>
                <a>最高</a>
                <div class="sfzcll_pos_box">
                    <div class="sfzcll_box">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <label><img src="images/ksh35.png">公路运输</label>
                        <div class="sfzcll_smallBk">
                            <div class="ygl">
                                <span>4347.2万</span>人
                            </div>
                        </div>
                        <div class="sfzcll_smallBk">
                            <div class="ygh">
                                <span>4347.2万</span>人
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="sfzcll_box">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <label><img src="images/ksh35.png">公路运输</label>
                        <div class="sfzcll_smallBk">
                            <div class="ygl">
                                <span>4347.2万</span>人
                            </div>
                        </div>
                        <div class="sfzcll_smallBk">
                            <div class="ygh">
                                <span>4347.2万</span>人
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="sfzcll_box">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <img class="sfzcll_bkJk" src="images/ksh34.png">
                        <label><img src="images/ksh35.png">公路运输</label>
                        <div class="sfzcll_smallBk">
                            <div class="ygl">
                                <span>4347.2万</span>人
                            </div>
                        </div>
                        <div class="sfzcll_smallBk">
                            <div class="ygh">
                                <span>4347.2万</span>人
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="visual_con">
        <div class="visual_conTop">
            <div class="visual_conTop_box visual_conTop1">
                <div>
                    <h3>繁忙节点数</h3>
                    <p>1</p>
                    <div class="conTop_smil">
                        <a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
                        <a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
                    </div>
                </div>
            </div>
            <div class="visual_conTop_box visual_conTop2">
                <div>
                    <h3>平均处理时间（s）</h3>
                    <p id="avg-time">0</p>
                    <div class="conTop_smil">
                        <a class="sz">日环比:<span>+3%</span><i class="fa fa-long-arrow-up"></i></a>
                        <a class="xd">周环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
                    </div>
                </div>
            </div>
            <div class="visual_conTop_box visual_conTop1">
                <div>
                    <h3>节点数</h3>
                    <p id="map-sum">0</p>
                    <div class="conTop_smil">
                        <a class="null">null</a>
                        <a class="xd">个<i class="fa fa-long-arrow-down"></i></a>
                    </div>
                </div>
            </div>
            <div class="visual_conTop_box visual_conTop2">
                <div>
                    <h3>已处理任务数</h3>
                    <p id="jops-num">0</p>
                    <div class="conTop_smil">
                        <a class="null">null</a>
                        <a class="xd">月环比:<span>-2%</span><i class="fa fa-long-arrow-down"></i></a>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="visual_conBot">
            <img class="visual_conBot_l" src="images/ksh42.png">
            <img class="visual_conBot_2" src="images/ksh43.png">
            <img class="visual_conBot_3" src="images/ksh44.png">
            <img class="visual_conBot_4" src="images/ksh45.png">
            <div class="visual_chart_text" id="title">
                <h2>节点运行状况</h2>
            </div>
            <div class="visual_chart" id="main8" style="height: 75%;"></div>
            <div class="visual_conBot_bot">
                <div class="visualSssf_left">
                    <h3>节点状况</h3>
                    <a style="display:block" class="active" href="javascript:void(0);" id="all-value">全部数据</a>
                    <a href="javascript:void(0);">今日</a>
                    <a href="javascript:void(0);">昨天</a>
                    <a href="javascript:void(0);">前天</a>
                    <div class="iDate date" style="height: 20px;">
                        <input id="query-date" type="text" style="color: black;height: 23px;">
                        <button type="button" class="addOn" style="height: 23px;"></button>
                    </div>
                    <input id="query-button" type="button" value="查询"
                           style="position:relative;top:2px;border-color: #0088d4;background-color: #215bf7;width: 60px;"/>

                </div>
                <div class="visualSssf_right">
                    <div class="visualSssf_right_box" id="main5"></div>
                    <div class="visualSssf_right_box" id="main6"></div>
                    <div class="visualSssf_right_box" id="main7"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div class="visual_right">
        <div class="visual_box">
            <div class="visual_title">
                <span>本月发生事件</span>
                <img src="images/ksh33.png">
            </div>
            <div class="swiper-container visual_swiper1 visual_chart">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" id="main3"></div>
                    <div class="swiper-slide" id="main31"></div>
                </div>
            </div>
        </div>
        <div class="visual_box visualSfzsfl">
            <div class="visual_title">
                <span>节点详细数据表</span>
                <img src="images/ksh33.png">
            </div>
            <!--<div class="visual_chart" id="main9">

            </div>-->
            <div class="visual_table">
                <table>
                    <tr>
                        <td>节点名称</td>
                        <td>平处理时间</td>
                        <td>处理任务数</td>
                    </tr>
                    <tr>
                        <td>2486万</td>
                        <td>2486万</td>
                        <td>2486万</td>
                    </tr>
                    <tr>
                        <td>2486万</td>
                        <td>2486万</td>
                        <td>2486万</td>
                    </tr>
                    <tr>
                        <td>2486万</td>
                        <td>2486万</td>
                        <td>2486万</td>
                    </tr>
                    <tr>
                        <td>2486万</td>
                        <td>2486万</td>
                        <td>2486万</td>
                    </tr>
                    <tr>
                        <td>2486万</td>
                        <td>2486万</td>
                        <td>2486万</td>
                    </tr>
                    <tr>
                        <td>2486万</td>
                        <td>2486万</td>
                        <td>2486万</td>
                    </tr>
                    <tr>
                        <td>2486万</td>
                        <td>2486万</td>
                        <td>2486万</td>
                    </tr>
                    <tr>
                        <td>2486万</td>
                        <td>2486万</td>
                        <td>2486万</td>
                    </tr>


                </table>
            </div>
        </div>
        <div class="visual_box">
            <div class="visual_title">
                <span>各节点成功率</span>
                <img src="images/ksh33.png">
            </div>
            <div class="swiper-container visual_swiper2 visual_chart">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" id="main4"></div>
                    <div class="swiper-slide" id="main41"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
</div>
<script type="text/javascript">
    $(function () {
        var a = $('.visualSssf_left a')
        for (var i = 0; i < a.length; i++) {
            a[i].index = i;
            a[i].onclick = function () {
                for (var i = 0; i < a.length; i++) {
                    a[i].className = ''
                }
                this.className = 'active'
            }
        }

        var sfzcllH = $('.sfzcll_box').height()
        var sfzcllHtwo = sfzcllH - 2
        $('.sfzcll_box').css('line-height', sfzcllH + 'px')
        $('.sfzcll_smallBk>div').css('line-height', sfzcllHtwo + 'px')

        //删除加载动画
        $('#load').fadeOut(1000)
        setTimeout(function () {
                $('#load').remove()
            }
            , 1100);
    })

    //交通流量
    // var myChart1 = echarts.init(document.getElementById('main1'));
    // myChart1.setOption(option1);
    //交通工具流量
    var myChart2 = echarts.init(document.getElementById('main2'));
    myChart2.setOption(option2);
    //本月发生事件
    var myChart3 = echarts.init(document.getElementById('main3'));
    myChart3.setOption(option3);
    var myChart31 = echarts.init(document.getElementById('main31'));
    myChart31.setOption(option31);
    var mySwiper1 = new Swiper('.visual_swiper1', {
        autoplay: true,//可选选项，自动滑动
        speed: 800,//可选选项，滑动速度
        autoplay: {
            delay: 5000,//1秒切换一次
        },
    })
    //收费站收费排行
    var myChart4 = echarts.init(document.getElementById('main4'));
    myChart4.setOption(option4);
    var myChart41 = echarts.init(document.getElementById('main41'));
    myChart41.setOption(option41);
    var mySwiper2 = new Swiper('.visual_swiper2', {
        autoplay: true,//可选选项，自动滑动
        direction: 'vertical',//可选选项，滑动方向
        speed: 2000,//可选选项，滑动速度
    })
    //今日实时收费
    var myChart5 = echarts.init(document.getElementById('main5'));
    myChart5.setOption(option5);
    var myChart6 = echarts.init(document.getElementById('main6'));
    myChart6.setOption(option6);
    var myChart7 = echarts.init(document.getElementById('main7'));
    myChart7.setOption(option7);
    //中间地图
    //var myChart8 = echarts.init(document.getElementById('main8'));
    //myChart8.setOption(option8);
    //收费站收费量
    //var myChart9 = echarts.init(document.getElementById('main9'));
    //myChart9.setOption(option9);
</script>

<script type="text/javascript">
    $(function () {

        //x轴名称
        var data8_x_name = null;
        //平均运行时间
        var data8_avetime = null;
        //平均运行时间的最大值和最小值
        var ave_top = null;
        var ave_bottom = null;

        //极值
        var data8_tb = null;
        var tb_top = null;
        var tb_bottom = null;
        //加载左边第一个图表
        leftFirstload()

        //加载中间节点信息表
        getMapMessage();
        //时间加载
        dateload();
        //中间图表加载
        bigchartload();
        //获取echarts8的数据
        getdata8();
        //中间图表加载
        bigchartload();


        //中间4个节点表格加载
        function getMapMessage() {
            //获取节点总数
            $.get("/map/mapsum", function (data) {
                $("#map-sum").empty();
                $("#map-sum").text(data);
            });

            //获取任务总数
            $.get("/map/jobnum", function (data) {
                $("#jops-num").empty();
                $("#jops-num").text(data);
            });

            //获取平均处理时间
            $.get("/map/avgtime", function (data) {
                $("#avg-time").empty();
                $("#avg-time").text(data);
            });
        }

        //页面初次加载获取中间map表的值
        function getdata8() {

                $.ajaxSettings.async = false;
            $.get("/echartsdata/8", function (data) {
                if (data == null || data.length == 0) alert("没有记录哦！");
                data8_avetime = new Array();
                data8_x_name = new Array();
                data8_tb = new Array();
                $(data).each(function (index) {
                    var mapname = this.mapNode;
                    var avetime = this.avetime;
                    var tb = this.maxtime - this.mintime;
                    if (index == 0) {
                        ave_top = this.avetime;
                        ave_bottom = this.avetime;
                        tb_top = this.maxtime - this.mintime;
                        tb_bottom = this.maxtime - this.mintime;
                    } else {
                        if (this.avetime > ave_top) ave_top = this.avetime;
                        if (this.avetime < ave_bottom) ave_bottom = this.avetime;
                        if (tb > tb_top) tb_top = tb;
                        if (tb < tb_bottom) tb_bottom = tb;
                    }
                    data8_x_name.push(mapname);
                    data8_avetime.push(avetime);
                    data8_tb.push(tb);

                });
            });
            ave_top = ave_top + 1000;
            ave_bottom = ave_bottom - 1000;
            tb_top = tb_top + 1000;
            tb_bottom = tb_bottom - 1000;
            /* avetime: 383983
            mapNode: "kj-gpu18.bigdata.com"
            mapname: "gpu18"
            maxtime: 6030046
            mintime: 2318
            state: 3 */

            $.ajaxSettings.async = true;
        }


        //加载时间插件
        function dateload() {
            // date time picker

            if ($(".iDate.date").length > 0) {
                $(".iDate.date").datetimepicker({
                    locale: "zh-cn",
                    format: "YYYY-MM-DD",
                    dayViewHeaderFormat: "YYYY年 MMMM"
                });
            }

        }
        //加载job时间图表
        function jobchartload(predata) {

            if (predata == null || predata.length == 0) alert("没有记录哦！");

            //中间图表
            var myChart8 = echarts.init(document.getElementById('main8'));

            //关闭上次的点击事件，避免出现多次点击事件
            myChart8.off('click');

            var time = new Array();
            var x_name = new Array();
            var status = new Array();
            $(predata).each(function (index) {
                var ti = this.elapsedTime;
                var x = this.jobInfoId;
                var s = this.finalStatus;
                time.push(ti);
                x_name.push(x);
                status.push(s);
            });


            $("#title").empty();
            $("#title").append("<h2>任务处理详情</h2>");
            $("#title").append("<input type='button' style='border-color: #0088d4;background-color: #215bf7;width: 60px;position: relative; margin-left: 800px; top:-20px;' id='break-button' value='返回'>");


            option = {
                backgroundColor: '#081638',
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true
                        }
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: x_name,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#063374",
                            width: 1,
                            type: "solid"
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: "#00c7ff",
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} ms'
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#00c7ff",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#063374",
                        }
                    }
                }],
                //滑动条，设置鼠标滚轮放大缩小
                dataZoom: [

                    {   // 这个dataZoom组件，也控制x轴。
                        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                        xAxisIndex: [0],
                        start: 0,      // 左边在 10% 的位置。
                        end: 10         // 右边在 60% 的位置。
                    }
                ],
                series: [{
                    type: 'bar',
                    data: time,
                    //barWidth: 50, //柱子宽度
                    //barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00fcae'
                            }, {
                                offset: 1,
                                color: '#006388'
                            }]),
                            opacity: 1,
                        }
                    }
                }]
            };
            myChart8.hideLoading();
            myChart8.clear();
            myChart8.setOption(option, true);
        }

        //加载map节点图表
        function bigchartload() {
            //中间图表
            var myChart8 = echarts.init(document.getElementById('main8'));
            //关闭上次的点击事件，避免出现多次点击事件
            myChart8.off('click');


            option = {
                backgroundColor: '#081638',
                grid: {
                    top: "25%",
                    bottom: "10%"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true
                        }
                    }
                },
                legend: {
                    data: ["平均处理时间", "极值差"],
                    top: "15%",
                    textStyle: {
                        color: "#ffffff"
                    }
                },
                xAxis: {
                    data: data8_x_name,
                    axisLine: {
                        show: true //隐藏X轴轴线
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: "#fff" //X轴文字颜色
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#01FCE3'
                        }
                    },
                },
                yAxis: [{
                    type: "value",
                    name: "ms",
                    nameTextStyle: {
                        color: "#fff"
                    },
                    min: ave_bottom,
                    max: ave_top,
                    splitLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#FFFFFF'
                        }
                    },
                },
                    {
                        type: "value",
                        name: "ms",
                        min: tb_bottom,
                        max: tb_top,
                        nameTextStyle: {
                            color: "#fff"
                        },
                        position: "right",
                        splitLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            formatter: "{value} ", //右侧Y轴文字显示
                            textStyle: {
                                color: "#fff"
                            }
                        }
                    },
                    {
                        type: "value",
                        gridIndex: 0,
                        min: 50,
                        max: 100,
                        splitNumber: 8,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                            }
                        }
                    }
                ],
                //滑动条，设置鼠标滚轮放大缩小
                dataZoom: [

                    {   // 这个dataZoom组件，也控制x轴。
                        type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
                        xAxisIndex: [0],
                        start: 0,      // 左边在 10% 的位置。
                        end: 100         // 右边在 60% 的位置。
                    }
                ],
                series: [{
                    name: "极值差",
                    type: "line",
                    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: true, //平滑曲线显示
                    showAllSymbol: true, //显示所有图形。
                    symbol: "circle", //标记的图形为实心圆
                    symbolSize: 10, //标记的大小
                    itemStyle: {
                        //折线拐点标志的样式
                        color: "#058cff"
                    },
                    lineStyle: {
                        color: "#058cff"
                    },
                    areaStyle: {
                        color: "rgba(5,140,255, 0.2)"
                    },
                    data: data8_tb
                },
                    {
                        name: "平均处理时间",
                        type: "bar",
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#00FFE3"
                                },
                                    {
                                        offset: 1,
                                        color: "#4693EC"
                                    }
                                ])
                            }
                        },
                        data: data8_avetime
                    }
                ]
            };
            myChart8.hideLoading();
            myChart8.clear();
            myChart8.setOption(option, true);

            myChart8.on('click', function (params) {
                //alert(params.name);
                var result = $("#all-value").hasClass("active");
                if (false == result) {
                    myChart8.showLoading();
                    //特定日期查询
                    var date = $("#query-date").val();
                    $.get("/map/jobs", {date: date, mapNode: params.name}, function (data) {
                        jobchartload(data);
                    });

                } else {
                    myChart8.showLoading();
                    //查询全部数据
                    $.get("/map/jobs", {mapNode: params.name}, function (data) {
                        jobchartload(data);
                    });

                }

            });

        }

        //加载左边第一个图表
        function leftFirstload(){

            $.get('/map/leftfirst',function (data) {


                option1 = {
                    title: {
                        show: true,
                        text: data.title,
                        subtext: data.subTitle,
                        link: '1111'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params) {
                            var time = '';
                            var str = '';
                            for (var i of params) {
                                time = i.name.replace(/\n/g, '') + '<br/>';
                                if (i.data == 'null' || i.data == null) {
                                    str += i.seriesName + '：无数据' + '<br/>'
                                } else {
                                    str += i.seriesName + '：' + i.data + symbol + '%<br/>'
                                }

                            }
                            return time + str;
                        },
                        axisPointer: {
                            type: 'none'
                        },
                    },
                    legend: {
                        right: data.legendRight || '30%',
                        top: 0,
                        right:10,
                        itemGap: 16,
                        itemWidth: 10,
                        itemHeight: 10,
                        data: myData.legendArr,
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontFamily: '微软雅黑',
                            fontSize: 12,
                        }
                    },
                    grid: {
                        x: 0,
                        y: 30,
                        x2: 0,
                        y2: 25,
                    },
                    xAxis: {
                        type: 'category',
                        data: data.xAxis,
                        axisTick: {
                            show: false,
                        },

                        axisLine: {
                            show: false,
                        },
                        axisLabel: {       //轴标
                            show: true,
                            interval: '0',
                            textStyle: {
                                lineHeight:5,
                                padding: [2, 2, 0, 2],
                                height: 50,
                                fontSize: 12,
                                color:'#fff',
                            },
                            rich: {
                                Sunny: {
                                    height: 50,
                                    // width: 60,
                                    padding: [0, 5, 0, 5],
                                    align: 'center',
                                },
                            },
                            formatter: function(params, index) {
                                var newParamsName = "";
                                var splitNumber = 5;
                                var paramsNameNumber = params && params.length;
                                if (paramsNameNumber && paramsNameNumber <= 4) {
                                    splitNumber = 4;
                                } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
                                    splitNumber = 4;
                                } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
                                    splitNumber = 5;
                                } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
                                    splitNumber = 5;
                                } else {
                                    params = params && params.slice(0, 15);
                                }

                                var provideNumber = splitNumber; //一行显示几个字
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
                                if (paramsNameNumber > provideNumber) {
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";
                                        var start = p * provideNumber;
                                        var end = start + provideNumber;
                                        if (p == rowNumber - 1) {
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            tempStr = params.substring(start, end) + "\n";
                                        }
                                        newParamsName += tempStr;
                                    }

                                } else {
                                    newParamsName = params;
                                }
                                params = newParamsName
                                return '{Sunny|' + params + '}';
                            },
                            color: '#687284',
                        },

                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#F1F3F5',
                                type: 'solid'
                            },
                            interval: 2
                        },
                        splitNumber: 4,
                    },
                    series: myData.seriesArr
                }

                var myChart1 = echarts.init(document.getElementById('main1'));
                myChart1.setOption(option1);
//////////////////////交通流量 end

            });
        }



        //点击全部数据
        $(".visualSssf_left a").click(function () {
            var text = $(this).text();
            if ("全部数据" == text) {
                //获取echarts8的数据
                getdata8();
                //中间图表加载
                bigchartload();
            }
        });
        //点击时间的查询按钮
        $("#query-button").click(function () {
            //中间图表
            var myChart8 = echarts.init(document.getElementById('main8'));
            myChart8.showLoading();
            var date = $("#query-date").val();
            $.ajaxSettings.async = false;
            $.get("/echartsdata/8?date="+ date, function (data) {
                if (data == null || data.length == 0) alert("没有记录哦！");
                data8_avetime = new Array();
                data8_x_name = new Array();
                data8_tb = new Array();
                $(data).each(function (index) {
                    var mapname = this.mapNode;
                    var avetime = this.avetime;
                    var tb = this.maxtime - this.mintime;
                    if (index == 1) {
                        ave_top = this.avetime;
                        ave_bottom = this.avetime;
                        tb_top = this.maxtime - this.mintime;
                        tb_bottom = this.maxtime - this.mintime;
                    } else {
                        if (this.avetime > ave_top) ave_top = this.avetime;
                        if (this.avetime < ave_bottom) ave_bottom = this.avetime;
                        if (tb > tb_top) tb_top = tb;
                        if (tb < tb_bottom) tb_bottom = tb;
                    }
                    data8_x_name.push(mapname);
                    data8_avetime.push(avetime);
                    data8_tb.push(tb);

                });
            });
            ave_top = ave_top + 1000;
            ave_bottom = ave_bottom - 1000;
            tb_top = tb_top + 1000;
            tb_bottom = tb_bottom - 1000;

            //中间图表加载
            bigchartload();

            $.ajaxSettings.async = true;

            //移除全部数据的active
            $(".visualSssf_left a").removeClass("active");
        });
        //点击返回按钮
        $(document).on("click", "#break-button", function () {
            $(this).prev().text("节点运行状况");
            $(this).remove();
            bigchartload();
        });


    });
</script>
</body>
</html>
